<template>
  <div>
    <el-card shadow="hover">
      <div class="card-header">
        <el-button type="text" @click="dialogVisible = true" size="mini" icon="el-icon-plus">报名</el-button>
        <el-input v-model="search" placeholder="请输入查询内容" style="width: 50%;">
          <template #prepend>
            <el-select v-model="select" placeholder="请选择" style="width: 150px">
              <el-option label="姓名" value="1"></el-option>
              <el-option label="报名号" value="2"></el-option>
              <el-option label="身份证号" value="3"></el-option>
              <el-option label="手机号" value="4"></el-option>
              <el-option label="状态" value="5"></el-option>
            </el-select>
          </template>
          <template #append>
            <el-button icon="el-icon-search">搜索</el-button>
          </template>
        </el-input>
      </div>
    </el-card>
    <el-table style="width: 100%" :data="tableData">
      <el-table-column label="报名号" prop="no" width="100"/>
      <el-table-column label="姓名" prop="name" width="100"/>
      <el-table-column label="专业" prop="major" width="200"/>
      <el-table-column label="身份证号" prop="cardno" width="250"/>
      <el-table-column label="手机号" prop="phone" width="200"/>
      <el-table-column label="状态" prop="status" width="200"/>
      <el-table-column align="right" label="操作">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">报名详情</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--报名界面-->
    <el-dialog v-model="dialogVisible" title="学生报名" fullscreen>
      <!--报名表单-->
      <el-card class="box-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>报名信息</span>
            <el-button type="primary" @click="saveReg">确认报名</el-button>
          </div>
        </template>
        <el-form ref="signInfo" status-icon :inline="true" :hide-required-asterisk="true" :rules="signRules" :model="signInfo" label-width="80px">
          <el-form-item label="入学时间" prop="semester">
            <el-select v-model="signInfo.semester" placeholder="请选择" style="width: 150px">
              <el-option value="2022年春"></el-option>
              <el-option value="2022年秋"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="户籍性质" prop="huji">
            <el-select v-model="signInfo.huji" placeholder="请选择" style="width: 150px">
              <el-option value="农业户口"></el-option>
              <el-option value="城镇户口"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="精准扶贫">
            <el-switch v-model="signInfo.fuping" active-text="是" inactive-text="否"/>
          </el-form-item>
          <el-form-item label="报名专业" prop="major">
            <el-select v-model="signInfo.major" placeholder="请选择报名专业" style="width: 150px">
              <el-option value="电子信息"></el-option>
              <el-option value="机电一体化"></el-option>
              <el-option value="数控技术"></el-option>
              <el-option value="学前教育"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="毕业学校" prop="school">
            <el-input v-model="signInfo.school" placeholder="请填写毕业学校"></el-input>
          </el-form-item>
          <el-form-item label="本人电话" prop="phone">
            <el-input v-model="signInfo.phone" placeholder="请填写电话号码" style="width: 150px"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <!--分割线-->
      <el-divider></el-divider>
      <!--学生信息表单-->
      <el-card class="box-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>学生信息表</span>
            <el-checkbox v-model="formEdit" label="编辑"></el-checkbox>
            <el-button type="info" plain @click="readCard(0)">读取身份证</el-button>
          </div>
        </template>
        <el-form ref="stuInfo" :hide-required-asterisk="true" :status-icon="true" :rules="residentRules" :model="stuInfo" label-width="120px" :disabled="!formEdit">
          <el-row>
            <el-col :span="22">
              <el-row>
                <el-col :span="5">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="stuInfo.name" placeholder="请填写姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="身份证号" prop="cardno">
                    <el-input v-model="stuInfo.cardno" placeholder="请填写身份证号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="性别" prop="sex">
                    <el-select v-model="stuInfo.sex" placeholder="请选择性别">
                      <el-option value="男" />
                      <el-option value="女" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="民族" prop="nation" label-width="80px">
                    <el-select v-model="stuInfo.nation" placeholder="请选择民族">
                      <el-option v-for="ethic in ethics1" :value="ethic" :key="ethic"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="出生日期" prop="born">
                    <el-input v-model="stuInfo.born" placeholder="例子：20020103"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="家庭住址" prop="address">
                    <el-input v-model="stuInfo.address" placeholder="请填写家庭住址"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="发证机关" prop="police">
                    <el-input v-model="stuInfo.police" placeholder="请填写发证机关"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="身份证有效期" prop="userlifee">
                    <el-input v-model="stuInfo.userlifee" placeholder="例子：20400902"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2" style="padding-left: 40px;">
              <img :src="`data:image/jpeg;base64,${stuInfo.photobase64}`" class="avatar">
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <!--分割线-->
      <el-divider></el-divider>
      <!--家长信息表单-->
      <el-card class="box-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>家长信息表</span>
            <div>
              <el-form ref="parent" :inline="true" :model="parent" :rules="residentRules" status-icon>
                <el-form-item label="亲属关系" prop="kindship">
                  <el-select v-model="parent.kindship" placeholder="请选择亲属关系">
                    <el-option value="父亲"/>
                    <el-option value="母亲"/>
                    <el-option value="爷爷"/>
                    <el-option value="奶奶"/>
                    <el-option value="其他"/>
                  </el-select>
                </el-form-item>
                <el-form-item label="亲属电话" prop="phone">
                  <el-input v-model="parent.phone" placeholder="请输入亲属电话" />
                </el-form-item>
                <el-form-item>
                  <el-button type="info" plain @click="readCard(1)">读取身份证</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>
        <el-form ref="parentInfo" :hide-required-asterisk="true" :status-icon="true" :rules="residentRules" :model="parentInfo" label-width="120px" :disabled="!formEdit1">
          <el-row>
            <el-col :span="22">
              <el-row>
                <el-col :span="5">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="parentInfo.name" placeholder="请填写姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="身份证号" prop="cardno">
                    <el-input v-model="parentInfo.cardno" placeholder="请填写身份证号码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="性别" prop="sex">
                    <el-select v-model="parentInfo.sex" placeholder="请选择性别">
                      <el-option value="男" />
                      <el-option value="女" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="民族" prop="nation" label-width="80px">
                    <el-select v-model="parentInfo.nation" placeholder="请选择民族">
                      <el-option v-for="ethic in ethics1" :value="ethic" :key="ethic"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="出生日期" prop="born">
                    <el-input v-model="parentInfo.born" placeholder="例子：20020103"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="10">
                  <el-form-item label="家庭住址" prop="address">
                    <el-input v-model="parentInfo.address" placeholder="请填写家庭住址"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="发证机关" prop="police">
                    <el-input v-model="parentInfo.police" placeholder="请填写发证机关"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="身份证有效期" prop="userlifee">
                    <el-input v-model="parentInfo.userlifee" placeholder="例子：20400902"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2" style="padding-left: 40px;">
              <img :src="`data:image/jpeg;base64,${parentInfo.photobase64}`" class="avatar">
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import {ethics1} from "@/api/dic";
import {ElMessage} from "element-plus";
import {checkIdCard, checkName, checkPhone} from "@/api/rules";
import {reg_date} from "@/api/regx";

export default {
  name: "StudentSign",
  setup() {
    // 身份证信息
    const newForm = {
      CardType: "",
      CertVol: "",
      EngName: "",
      FpData: "",
      FpDescribe: "",
      FpFeature1: "",
      FpFeature2: "",
      FpFingerName1: "",
      FpFingerName2: "",
      FpQuality1: "",
      FpQuality2: "",
      FpRegResult1: "",
      FpRegResult2: "",
      IssuesTimes: "",
      PassID: "",
      address: "",
      backImg: "",
      born: "",
      cardno: "",
      code: "0",
      errmsg: "",
      frontImg: "",
      name: "",
      nation: "",
      photobase64: "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",
      police: "",
      retcode: "",
      retmsg: "",
      sex: "",
      userlifeb: "",
      userlifee: ""
    }
    // 报名信息
    const newSignForm = {
      huji: '',
      fuping: false,
      major: '',
      school: '',
      phone: '',
    }
    // 报名验证
    const signRules = {
      semester:[{ required: true, message: '请选择入学时间', trigger: ['blur', 'change'], }],
      huji: [{ required: true, message: '请选择户籍类型', trigger: ['blur', 'change'], }],
      major: [{ required: true, message: '请选择报名专业', trigger: ['blur', 'change'], }],
      school: [{ required: true, message: '请填写毕业学校', trigger: ['blur', 'change'], }],
      phone: [{ validator: checkPhone, trigger: ['blur', 'change'], }]
    }
    // 身份信息验证
    const residentRules = {
      name: [{ validator: checkName, trigger: ['blur', 'change'], }],
      cardno: [{ validator: checkIdCard, trigger: ['blur', 'change'], }],
      sex: [{ required: true, message: '请选择性别', trigger: ['blur', 'change'], }],
      nation: [{ required: true, message: '请选择民族', trigger: ['blur', 'change'], }],
      born: [
        { required: true, message: '请填写出生日期', trigger: ['blur', 'change'], },
        { pattern: reg_date, message: '请输入正确日期', trigger: ['blur', 'change'] }
      ],
      address: [{ required: true, message: '请填写家庭住址', trigger: ['blur', 'change'], }],
      police: [{ required: true, message: '请填写发证机关', trigger: ['blur', 'change'], }],
      userlifee: [
        { required: true, message: '请填写有效日期', trigger: ['blur', 'change'], },
        { pattern: reg_date, message: '请输入正确日期', trigger: ['blur', 'change'] }
      ],
      kindship: [{ required: true, message: '请选择亲属关系', trigger: ['blur', 'change'], }],
      phone: [{ validator: checkPhone, trigger: ['blur', 'change'], }]
    }
    return {
      newForm,
      newSignForm,
      signRules,
      residentRules,
      ethics1
    }
  },
  created() {
    this.signInfo = JSON.parse(JSON.stringify(this.signInfo))
    this.stuInfo = JSON.parse(JSON.stringify(this.newForm))
    this.parentInfo = JSON.parse(JSON.stringify(this.newForm))
  },
  data() {
    return {
      dialogVisible: false,
      search: '',
      select: '',
      stuInfo: {},
      formEdit: false,
      parentInfo: {},
      formEdit1: false,
      signInfo: {},
      parent: {
        kindship: '',
        phone: ''
      },
      tableData: [
        {
          no: '1',
          name: '张三',
          major: '数控技术',
          cardno: '610123200212101562',
          phone: '13962358421',
          address: '陕西省汉中市南郑区大河坎镇',
          payable: 1800.00,
          payment: 0,
          status: 1
        }
      ]
    }
  },
  methods: {
    readCard(tp) {
      // 读取身份证
      axios.get("http://localhost:8989/api/ReadMsg").then(res => {
        if(res.data.code == 0) {
          if(tp === 0) {
            this.stuInfo = res.data
          }
          else {
            this.parentInfo = res.data
          }
        }
        else {
          ElMessage.error('读取失败')
        }
      })
    },
    saveReg() {
      let validate = false
      // 验证报名信息
      this.$refs['signInfo'].validate((valid) => {
        if(valid){
          // 验证学生信息
          this.$refs['stuInfo'].validate((valid) => {
            if(valid) {
              // 验证亲属关系
              this.$refs['parent'].validate((valid) => {
                if(valid) {
                  // 验证亲属信息
                  this.$refs['parentInfo'].validate((valid) => {
                    validate = valid
                  })
                }
              })
            }
          })
        }
      })
      if(validate) {
        if(this.stuInfo.cardno === this.parentInfo.cardno) {
          ElMessage.error('学生与家长的信息重复')
          return
        }
        ElMessage.success('保存报名信息')
      }
    }
  }
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.avatar {
  width: 81px;
  height: 100px;
}
</style>